<!DOCTYPE HTML>
<html>
<head>
  <!-- support for mobile touch devices -->
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

  <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
  <link href="../bootstrap.min.css" rel="stylesheet">
  <link href="../dialogPolyfill.css" rel="stylesheet">
  <link href="../cornerstone.min.css" rel="stylesheet">

  <style>
    /* prevents selection when left click dragging */
    .disable-selection {
      -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
    }
    /* prevents cursor from changing to the i bar on the overlays*/
    .noIbar {
      cursor:default;
    }
    .annotationDialog, .relabelDialog {
      z-index: 1000;
      position: absolute;
      margin: 0px;
      left: 40%;
      top: 40%;
      width: 300px;
      border: 1px black solid;
      border-radius: 5px;
    }
    .annotationTextInputOptions {
      padding: 5px 0px;
    }
    .annotationTextInput {
      margin-left: 5px;
    }
    .annotationDialogConfirm {
      float: right;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1>Seed Points Example</h1>
    <p>This page contains an example of the seed points tool</p>
    <a href="../index.html">Go back to the Examples page</a>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-3">
      <ul class="list-group">
        <a id="enable" class="list-group-item">Enable</a>
        <a id="activate" class="list-group-item">Activate</a>
        <a id="deactivate" class="list-group-item">Deactivate</a>
        <a id="disable" class="list-group-item">Disable</a>
      </ul>
      <input type="checkbox" id="check-coords" checked> Show Coordinates<br>
      <input type="checkbox" id="check-countUp" checked> Count up<br><br>
      <div>
        Begin with:<br>
        <input type="text" id="f-letter" value="A" maxlength="1" size="1" style="text-transform:uppercase">
        <input type="number" id="f-number" value="1" style="width: 3em">
      </div><br>
      <a id="clearLabels">Clear Labels</a>
    </div>
    <div class="col-xs-6">
      <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
         oncontextmenu="return false"
         class='cornerstone-enabled-image disable-selection noIbar'
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage"
           style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
        </div>
      </div>
      <dialog class="relabelDialog" oncontextmenu="return false">
        <h5>Edit your annotation</h5>
        <div class="annotationTextInputOptions">
          <label for="annotationTextInput">New label</label>
          <input type="text" id="relabelText" placeholder="A" maxlength="1" size="1" style="text-transform:uppercase">
          <input type="number" id="relabelNumber" placeholder="1" style="width: 3em">
        </div>
        <div>
          <a class="relabelRemove btn btn-sm btn-secondary">Remove marker</a>
          <a class="relabelConfirm btn btn-sm btn-primary">OK</a>
        </div>
      </dialog>
    </div>
  </div>
</body>

<!-- include the hammer.js library for touch gestures-->
<script src="../hammer.min.js"></script>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script src="../dialogPolyfill.js"></script>

<script>
  // Register the dialogs using the HTML5 Dialog Polyfill
  var relabelDialog = document.querySelector('.relabelDialog');
  dialogPolyfill.registerDialog(relabelDialog);
  
  var element = document.getElementById('dicomImage');
  var imageId = 'example://1';
  
  // Define a callback to get your text annotation
  // This could be used, e.g. to open a modal
  function getTextCallback(doneGetTextCallback) {
    
    if ( config.countUp ) {
      config.currentNumber++;
    } else {
      config.currentNumber--;
    }
    
    var text = config.currentLetter + config.currentNumber;
    doneGetTextCallback(text);
  }

  // Define a callback to edit your text annotation
  // This could be used, e.g. to open a modal
  function changeTextCallback(data, eventData, doneChangingTextCallback) {
    var relabelDialog = document.querySelector('.relabelDialog');
    
    var getTextLetter = document.getElementById('relabelText');
    var getTextNumber = document.getElementById('relabelNumber');
    
    var confirm = relabelDialog.querySelector('.relabelConfirm');
    var remove = relabelDialog.querySelector('.relabelRemove');

    getTextLetter.value = data.text;
    getTextNumber.value = data.text;
    relabelDialog.showModal();

    function confirmHandler() {
      relabelDialog.close();
      doneChangingTextCallback(data, getTextLetter.value.toUpperCase() + getTextNumber.value);
    }

    confirm.removeEventListener('click', confirmHandler);
    confirm.addEventListener('click', confirmHandler);

    // If the remove button is clicked, delete this marker
    function removeHandler() {
      relabelDialog.close();
      doneChangingTextCallback(data, undefined, true);
    }

    remove.removeEventListener('click', removeHandler);
    remove.addEventListener('click', removeHandler);

    relabelDialog.removeEventListener("keydown", keyPressHandler);
    relabelDialog.addEventListener('keydown', keyPressHandler);

    function keyPressHandler(e) {
      // If Enter is pressed, close the dialog
      if (e.which === 13) {
        closeHandler();
      }
    }

    function closeHandler() {
      relabelDialog.close();
      doneChangingTextCallback(data, getTextLetter.value.toUpperCase() + getTextNumber.value);
      // Reset the text value
      getTextLetter.value = "";
      getTextNumber.value = "";
    }
  }

  var config = {
    getTextCallback : getTextCallback,
    changeTextCallback : changeTextCallback,
    drawHandles : false,
    drawHandlesOnHover : true,
    currentLetter: 'A',
    currentNumber: 0,
    showCoordinates: true,
    countUp: true
  };

  // image enable the dicomImage element
  cornerstone.enable(element);

  cornerstone.loadImage(imageId).then(function(image) {
    cornerstone.displayImage(element, image);

    cornerstoneTools.mouseInput.enable(element);
    cornerstoneTools.touchInput.enable(element);

    // Try commenting this out to see the default behaviour
    // By default, the tool uses Javascript's Prompt function
    // to ask the user for the annotation. This example uses a
    // slightly nicer HTML5 dialog element.
    cornerstoneTools.seedAnnotate.setConfiguration(config);

    // Enable all tools we want to use with this element
    cornerstoneTools.seedAnnotate.activate(element, 1);
    cornerstoneTools.seedAnnotateTouch.activate(element);

    activate("activate");

    function activate(id) {
      document.querySelectorAll('a').forEach(function(elem) { elem.classList.remove('active'); });
      document.getElementById(id).classList.add('active');
    }

    // Tool button event handlers that set the new active tool
    document.getElementById('enable').addEventListener('click', function() {
      activate("enable");
      cornerstoneTools.seedAnnotate.enable(element);
      cornerstoneTools.seedAnnotateTouch.enable(element);
      return false;
    });
    document.getElementById('disable').addEventListener('click', function() {
      activate("disable");
      cornerstoneTools.seedAnnotate.disable(element);
      cornerstoneTools.seedAnnotateTouch.disable(element);
      return false;
    });
    document.getElementById('activate').addEventListener('click', function() {
      activate("activate");
      cornerstoneTools.seedAnnotate.activate(element, 1);
      cornerstoneTools.seedAnnotateTouch.activate(element);
      return false;
    });
    document.getElementById('deactivate').addEventListener('click', function() {
      activate("deactivate");
      cornerstoneTools.seedAnnotate.deactivate(element, 1);
      cornerstoneTools.seedAnnotateTouch.deactivate(element);
      return false;
    });
      
    document.getElementById('check-coords').addEventListener('click', function() {
      config.showCoordinates = document.getElementById('check-coords').checked;
      cornerstone.updateImage(element);
    });
    document.getElementById('check-countUp').addEventListener('click', function() {
      config.countUp = document.getElementById('check-countUp').checked;
      cornerstone.updateImage(element);
    });
    var updateLetter = function() {
      config.currentLetter = document.getElementById('f-letter').value.toUpperCase();
    };
    document.getElementById('f-letter').addEventListener('input', updateLetter);
    document.getElementById('f-letter').addEventListener('propertychange', updateLetter);
    document.getElementById('f-letter').addEventListener('paste', updateLetter);
    var updateNumber = function() {
      if (config.countUp == true ) { 
        config.currentNumber = parseInt(document.getElementById('f-number').value) - 1;
      } else {
        config.currentNumber = parseInt(document.getElementById('f-number').value) + 1;
      }
    };
    document.getElementById('f-number').addEventListener('input', updateNumber);
    document.getElementById('f-number').addEventListener('propertychange', updateNumber);
    document.getElementById('f-number').addEventListener('paste', updateNumber);
      
    var toolType = 'seedAnnotate';
    var clearLabels = document.getElementById('clearLabels');
    clearLabels.addEventListener('click', function() {
      // Clear all annotations
      cornerstoneTools.clearToolState(element, toolType);
      cornerstone.updateImage(element);
      // Reset the initial values for naming
      config.currentLetter = document.getElementById('f-letter').value;
      if (config.countUp == true ) { 
        config.currentNumber = parseInt(document.getElementById('f-number').value) - 1;
      } else {
        config.currentNumber = parseInt(document.getElementById('f-number').value) + 1;
      }
    })
      
  });

</script>
</html>
